<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    css变量-->

<style>
    /* html的 data-theme属性 **/
    html[data-theme='dark']{
        --text-color:#fff;
        --bg1:#102128;
        --bg2:#2d5567;
    }

    /**
     定义在 :root 选择器下，，可以全局使用
     */
    :root{
        --text-color:orange;
        --padding:16px;
        --bg1:#c7ffdd;
        --bg2:#fbd988;
    }

    /**
    也可以定义在任意选择器中，，，只会在该作用于及其子元素中生效
     */

    .container{
        color: var(--text-color);
        background: linear-gradient(to bottom,var(--bg1),var(--bg2));
        height: 100vh;
    }

</style>


<div class="container">
    hehe

    <button id="btn">change</button>
</div>

<script>
    var btn = document.querySelector("#btn");
    var html = document.documentElement;

    btn.addEventListener("click",()=>{

        var currentTheme = html.getAttribute("data-theme");
        console.log(currentTheme,"hehe")
        if (currentTheme === "dark"){
            html.setAttribute("data-theme","light")
        }else{
            html.setAttribute("data-theme","dark")
        }
    })

</script>

</body>
</html>
